<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							订单详情
						</view>
						<view class="app-header-right" @click="toSearchView">
							<image src="../../static/images/search_b.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container" v-if="isShow&&Object.keys(dataInfo).length!==0">
			<view class="notice_position">
				<view class="info-tips">
					{{content}}
				</view>
				<view class="order-view-section">
					<view class="order-view-block order-view-num">
						<view class="order-view-info-text">
							<view class="p">
								订单编号：{{dataInfo.order_id}}
							</view>
							<view class="p">
								订单状态：等待付款
							</view>
						</view>
					</view>
					<view class="order-view-block order-view-status">
						<view class="ol">
							<view class="li done">
								<text class="status">下单</text>
								<text class="time">{{dataInfo.payEndTime-900000|forDate}}</text>
							</view>
							<view class="li ">
								<text class="status">付款</text>
							</view>
							<view class="li ">
								<text class="status">配货</text>
							</view>
							<view class="li ">
								<text class="status">出库</text>
							</view>
							<view class="li ">
								<text class="status">交易成功</text>
							</view>
						</view>
					</view>
					<view class="order-view-product">
						<view class="ol">
							<block v-for="(item,index) in dataInfo.goods" :key="index">
								<view class="li product-block-warp">
									<view class="product-block el-flex">
										<image :src="item.img_url" mode=""></image>
										<view class="infor">
											<view class="el-flex info">
												<view class="product-name">
													<view class="p">
														{{item.name}}
													</view>
												</view>
												<view class="product-price">
													<view class="price-wrap">
														<text class="price-unit">¥ </text>
														<text class="price-num">{{item.price}}</text>
													</view>
													<view class="product-num">
														x {{item.count}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<block v-for="(pack,packIndex) in item.packageList" :key="`${index}_${packIndex}`">
									<view class="li product-block-warp">
										<view class="product-block el-flex">
											<image :src="pack.img_url" mode=""></image>
											<view class="infor">
												<view class="el-flex info">
													<view class="product-name">
														<view class="p">
															{{pack.name}}
														</view>
													</view>
													<view class="product-price">
														<view class="price-wrap">
															<text class="price-unit">¥ </text>
															<text class="price-num">{{pack.price}}</text>
														</view>
														<view class="product-num">
															x {{pack.count}}
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</block>
								<block v-for="(serve,sIndex) in item.serveArr" :key="`${index}_${sIndex}_0`">
									<view class="li product-block-warp">
										<view class="product-block el-flex">
											<template v-if="serve.service_type_name=='service_micloud'">
												<image
													src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572490983.06999803.jpg"
													mode="widthFix"></image>
											</template>
											<template v-else-if="serve.service_type_name=='service_prolong'">
												<image
													src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205231453_2126ed0b86f8fac1a0498a053cf5c337.png"
													mode="widthFix"></image>
											</template>
											<template v-else>
												<image
													src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212261525_bfb3fcf0720b57a3f90cde2a2d58d98e.png"
													mode="widthFix"></image>
											</template>
											<view class="infor">
												<view class="el-flex info">
													<view class="product-name">
														<view class="p">
															{{serve.name}}
														</view>
													</view>
													<view class="product-price">
														<view class="price-wrap">
															<text class="price-unit">¥ </text>
															<text class="price-num">{{serve.price}}</text>
														</view>
														<view class="product-num">
															x {{serve.count}}
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</block>
							</block>
						</view>
					</view>
				</view>
				<view class="order-view-block order-view-text order-view-orderInfo">
					<view class="p">
						商品价格：{{dataInfo.goods|market_price}} 元
					</view>
					<view class="p">
						配送费用：0 元
					</view>
					<view class="p">
						促销优惠：{{dataInfo.goods|finalMoney}} 元
					</view>
					<view class="p">
						应付金额：{{dataInfo.goods|forMoney}} 元
					</view>
				</view>
				<view class="order-view-block order-view-text order-view-orderInfo">
					<view class="p">
						下单日期：{{dataInfo.payEndTime-900000|forDate}}
					</view>
					<view class="p">
						收货地址：
						<text class="address">{{addressData|city}}</text>
					</view>
					<view class="p">
						收货人名：{{addressData.consignee}} {{addressData.tel|phone}}
					</view>
					<view class="p">
						收货时间：不限送货时间
					</view>
					<view class="p">
						发票类型：电子普通发票
					</view>
					<view class="p">
						发票抬头：个人
					</view>
				</view>
				<view class="order-view-block order-view-download">
					<view class="title">
						如果您想查看电子发票或修改订单信息，请下载小米商城App
					</view>
					<view class="btn-download">
						下载小米商城App
					</view>
				</view>
				<view class="order-view-action btn-wrap">
					<view class="btn-line btn-left">
						联系客服
					</view>
					<view class="btn-line btn-left" @click="cancelOrder">
						取消订单
					</view>
					<view class="btn-line btn-primary" @click="toPayView">
						立即付款
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import showModal from '../../common/js/showModal.js'
	export default {
		data() {
			return {
				isShow: false,
				content: '请在0小时0分0秒内完成支付，超时订单将关闭。',
				dataInfo: {},
				addressData: {},
				order_id: ''
			};
		},
		filters: {
			city: function(obj) {
				if (obj.address) {
					return obj.province + obj.city + obj.district +
						obj.area + obj.address;
				}
			},
			phone: function(tel) {
				if (tel) {
					let str = tel.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2');
					return str
				}
			},
			forDate: function(timestamp) {
				if (timestamp) {
					const date = new Date(timestamp);
					const year = date.getFullYear();
					const month = date.getMonth() + 1;
					const day = date.getDate();
					const hour = date.getHours();
					const minute = date.getMinutes();
					const second = date.getSeconds();
					const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
					return formattedDate
				}
			},
			market_price: function(goods) {
				let total = 0
				goods.forEach(i => {
					total += Number(i.market_price)
					i.packageList && i.packageList.forEach(j => {
						total += Number(j.market_price)
					})
					i.serveArr && i.serveArr.forEach(j => {
						total += Number(j.market_price)
					})
				})
				return total.toFixed(2)
			},
			finalMoney: function(goods) {
				let total = 0
				goods.forEach(i => {
					total += (Number(i.price) - Number(i.market_price))
					i.packageList && i.packageList.forEach(j => {
						total += (Number(j.price) - Number(j.market_price))
					})
					i.serveArr && i.serveArr.forEach(j => {
						total += (Number(j.price) - Number(j.market_price))
					})
				})
				return total
			},
			forMoney: function(goods) {
				let total = 0
				goods.forEach(i => {
					total += Number(i.price)
					i.packageList && i.packageList.forEach(j => {
						total += Number(j.price)
					})
					i.serveArr && i.serveArr.forEach(j => {
						total += Number(j.price)
					})
				})
				return total.toFixed(2)
			},
		},
		watch: {
			endTime(newVal) {
				this.countdowm(this.endTime)
			}
		},
		methods: {
			cancelOrder(index) {
				uni.showModal({
					title: '确定取消当前订单吗？',
					cancelText: '再看看',
					confirmText: '确定取消',
					success: (res) => {
						if (res.confirm) {
							this.clearSubPayData([this.order_id], true)
						}
					}
				})
			},
			toPayView() {
				uni.navigateTo({
					url: `/subPage/pay-view/pay-view?order_id=${this.order_id}`
				})
			},
			Back() {
				uni.navigateBack(1)
			},
			countdowm(timestamp) {
				let self = this;
				let timer = setInterval(function() {
					let nowTime = new Date();
					let endTime = new Date(timestamp);
					let t = endTime.getTime() - nowTime.getTime();
					if (t > 0) {
						let day = Math.floor(t / 86400000);
						let hour = Math.floor((t / 3600000) % 24);
						let min = Math.floor((t / 60000) % 60);
						let sec = Math.floor((t / 1000) % 60);
						min = min < 10 ? "0" + min : min;
						sec = sec < 10 ? "0" + sec : sec;
						let format = '';
						format = `请在${hour}小时${min}分${sec}秒内完成支付，超时订单将关闭。`;
						self.content = format;
					} else {
						clearInterval(timer);
						self.content = '请尽快完成支付，超时订单将关闭'
					}
				}, 1000);
			},
			toSearchView() {
				uni.navigateTo({
					url: '/secPage/searchView/searchView'
				})
			},
			clearSubPayData(order_id, flag) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/clearSubPayData',
					method: 'POST',
					header: {
						Authorization: userToken
					},
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.data.code == 200) {
							if (flag) {
								uni.navigateBack(1)
							} else {
								self.isShow = false
								self.showModal()
							}
						} else if (res.data.code == 401) {
							self.isShow = false
							showModal()
						}
					},
					fail: function(err) {

					}
				})
			},
			showModal() {
				uni.showModal({
					title: '温馨提示',
					content: '订单不是待支付状态',
					showCancel: false,
					success(res) {
						if (res.confirm) {
							uni.redirectTo({
								url: '/subPage/checkout/checkout'
							})
						}
					}
				})
			},
			getOrderData(order_id) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/getOrderData',
					method: 'POST',
					data: {
						order_id: order_id,
					},
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.dataInfo = res.data.data
							let time = Date.now()
							if (res.data.data.payEndTime + 60000 > time > res.data.data.payEndTime) {
								self.content = '请尽快完成支付，超时订单将关闭'
							} else if (res.data.data.payEndTime + 60000 < time) {
								self.clearSubPayData([res.data.data.order_id])
								return;
							}
							self.endTime = res.data.data.payEndTime
							self.countdowm(self.endTime)
							self.isShow = true
						} else if (res.data.code == 401) {
							self.isShow = false
							showModal()
						}
					},
					fail: function(err) {
						self.isShow = false
					}
				})
			}
		},
		onLoad(e) {
			if (!e.order_id) {
				uni.redirectTo({
					url: '/pages/error/error'
				})
				return;
			}
			this.order_id = e.order_id
			this.getOrderData(e.order_id)
			let address_item = uni.getStorageSync('checkout_address')
			if (!address_item || address_item.length === 0) {
				return;
			} else {
				address_item.forEach(item => {
					if (item.is_default) {
						this.addressData = item
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: .24rem;
		line-height: 1.15;
		box-sizing: border-box;
	}

	.header {
		height: .96rem;
		background: #f2f2f2;

		.header-bar {
			background: #f2f2f2;
			height: 100%;
		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
				padding: 0 0.2rem;

				image {
					display: block;
					width: 0.6rem;
					height: 0.6rem;
				}
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);
			}
		}
	}

	.container {
		padding-top: .96rem;

		.order-view-info-text {
			.p {
				line-height: 1.5em;
			}
		}

		.notice_position {
			padding-bottom: 52px;
			text-align: left;
			background: #f5f5f5;
			font-size: .24rem;

			.info-tips {
				background: #fbf3c4;
				color: #b57842;
				padding: 0.12rem 0.2rem;
				opacity: .7;
				line-height: .3rem;
				overflow: hidden;
				font-size: .24rem;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.order-view-block {
				padding: 0.26rem 0.36rem;
				margin-bottom: 0.2rem;
				background: #fff;
			}

			.order-view-section {
				.order-view-num {
					position: relative;

					.order-view-info-text {
						line-height: 1.5em;

						.p {}
					}

				}

				.order-view-status {
					border-bottom: 1px solid #f6f6f6;
					margin-bottom: 0;

					.ol {
						display: box;
						display: -webkit-box;

						.li {
							-webkit-box-flex: 1;
							box-flex: 1;
							margin-right: 2px;
							width: 100%;

							text {
								display: block;
							}

							.status {
								background: #ccc;
								color: #fff;
								text-align: center;
								padding: 0.1rem 0;
								margin-bottom: 0.28rem;
							}

							.time {
								font-size: .2rem;
								text-align: center;
							}
						}

						.done {
							.status {
								background: #0c6;
							}
						}
					}
				}

				.order-view-product {
					margin-bottom: 0.2rem;
					background: #fff;

					.ol {
						.li {
							margin-bottom: 0.2rem;
							border-bottom: 1px solid #e7e7e7;

							&:last-child {
								margin-bottom: 0;
							}

							.product-block {
								padding: 0.26rem 0.36rem;
								position: relative;
								z-index: 2;
								justify-content: space-between;

								image {
									margin-right: 0.2rem;
									width: 1.13rem;
									height: 1.13rem;
								}

								.infor {
									flex: 1 1 auto;

									.info {
										align-items: flex-start;

										.product-name {
											width: 3.78rem;
											text-overflow: ellipsis;
											display: -webkit-box;
											-webkit-line-clamp: 2;
											overflow: hidden;
											-webkit-box-orient: vertical;

											.p {}
										}

										.product-price {
											width: 1.28rem;
											text-align: right;

											.price-wrap {
												white-space: nowrap;

												.price-unit {
													padding-top: 0.02rem;
													font-size: .187rem;
													display: inline-block;
													vertical-align: 3px;
												}

												.price-num {
													font-size: .28rem;
													text-align: left;
												}
											}

											.product-num {
												padding-top: 0.2rem;
												color: rgba(0, 0, 0, .26);
											}
										}
									}
								}
							}
						}
					}
				}

			}

		}

		.order-view-text {}

		.order-view-orderInfo {
			.p {
				line-height: 1.8em;

				.address {}
			}
		}

		.order-view-download {
			padding: 0.2rem !important;
			background: #f5f5f5 !important;
			text-align: center;
			padding-top: 0 !important;

			.title {
				padding: 0.2rem 0;
				color: rgba(0, 0, 0, .6);
				line-height: 1.2;
			}

			.btn-download {
				display: block;
				font-size: .24rem;
				background: #fff;
				border: 1px solid #eee;
				width: 4rem;
				height: 0.6rem;
				line-height: .6rem;
				margin: 0 auto;
				color: #333;
			}
		}

		.btn-wrap {
			padding: 0 0.1rem 0.2rem;
		}

		.order-view-action {
			background: #fff;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			margin-bottom: 0;
			z-index: 99;
			box-shadow: 0 3px 14px 2px rgba(0, 0, 0, .12);

			.btn-line {
				float: right;
				margin: 0.2rem 0.1rem 0;
				border: 1px solid #ccc;
				padding: 0 0.3rem;
				height: 0.6rem;
				line-height: .6rem;
				color: #333;
			}

			.btn-left {
				font-size: .22rem;
				float: left;
			}

			.btn-primary {
				background: #f95b07;
				border: none;
				font-size: .22rem;
				color: #fff;
			}
		}

	}
</style>